import React from 'react'
import { CartO, ChatO, Star } from '@react-vant/icons';
import { ActionBar,Toast, NavBar,Swiper  } from 'react-vant';
import { useNavigate ,useLocation,useParams } from 'react-router-dom';
import { useDispatch ,useSelector  }from 'react-redux';
import { STORETYPE,LISTITEMTYPE } from '../Type/Store.d';
import { SHOPLIST ,LOVELIST} from '../Type/SotreItem.d';

function Detail() {
    const Navigate = useNavigate();
    const Location = useLocation();
    const Params = useParams();
    const Dispatch = useDispatch();


    const childrenList = useSelector((state:STORETYPE)=>state.childrenList);
    const obj = childrenList.find(item=>item.id == Params.id) as LISTITEMTYPE;
    console.log(obj,'---obj');
    
    return (
        <div className='Detail'>
            <NavBar
                title="商品详情"
                leftText="返回"
                onClickLeft={() => Navigate(-1)}
            />
            <main>
                <div className="demo-swiper">
                    <Swiper autoplay={2000} loop={true}>
                        {
                            (obj.img as LISTITEMTYPE[]).map((item,index)=>{
                                return <Swiper.Item key={index}>
                                    <img src={item.src} alt="" />
                                </Swiper.Item>
                            })
                        }
                        
                    </Swiper>
                </div>
                <h2>{obj.txt}</h2>
                <h3>￥{obj.price}元</h3>
                <p>详情介绍:<br/>{obj.con}</p>
            </main>
            <footer>
                <ActionBar>
                    <ActionBar.Icon icon={<ChatO color="red" />} text="客服" />
                    <ActionBar.Icon icon={<CartO color="red" />} badge={{ content: useSelector((state:STORETYPE)=>state.shopList.length) as number}} text="购物车" onClick={()=>Navigate('/Home/Shop')}/>
                    <ActionBar.Icon icon={<Star color={obj.flag ? 'red' :'#000'} />} text={obj.flag ? '已收藏' : '未收藏'} onClick={()=>{
                        Dispatch({
                            type:LOVELIST,
                            payload:obj
                        })
                    }}/>
                    <ActionBar.Button type="warning" text="加入购物车" onClick={()=>{
                        Dispatch({
                            type:SHOPLIST,
                            payload:obj
                        })
                    }}/>
                    <ActionBar.Button type="danger" text="立即购买" />
                </ActionBar>
            </footer>
        </div>
    )
}

export default Detail